<!--
 * @Description: 新增或编辑
 * @Author: Liu Zhiwang
 * @Date: 2021-04-13 17:05:40
 * @LastEditTime: 2022-03-16 11:27:03
 * @LastEditors: Please set LastEditors
-->
<template>
  <div v-if="isReloadData">
    <base-dialog
      class="dialog_box"
      width="73%"
      :visible.sync="dialog.visible"
      :title="dialog.title"
      :loading="dialog.loading"
      :disabled="dialog.disabled"
      @updateData="updateData"
      @close="afterCloseDialog"
      @open="beforeOpenDialog">
      <el-form
        ref="dataForm"
        :model="dialog.form"
        :rules="dialog.rules"
        :disabled="dialog.disabled"
        label-width="100px">
        <el-row>
          <el-col :span="8">
            <el-form-item label="使用单位" prop="deptId">
              <el-select v-model="dialog.form.deptId" value-key="deptId" clearable>
                <el-option
                  v-for="child in deptList"
                  :key="child.deptNo"
                  :label="child.deptName"
                  :value="child.deptNo"
                  :props=" { label: 'deptName', value: 'deptNo' }" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备分类名称" prop="typeId">
              <el-select v-model="dialog.form.typeId" value-key="typeId" clearable @change="changeTypeList">
                <el-option
                  v-for="child in typeList"
                  :key="child.id"
                  :label="child.typeName"
                  :value="child.id"
                  :props=" { label: 'typeName', value: 'id' }" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备名称" prop="divceName">
              <el-input v-model="dialog.form.divceName" maxlength="20" readonly="readonly" type="text" @input="changeTypeList($event)" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备型号" prop="divceType">
              <el-input v-model="dialog.form.divceType" maxlength="20" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备编号" prop="divceNumber">
              <el-input v-model="dialog.form.divceNumber" maxlength="20" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备状态" prop="divceState">
              <el-select v-model="dialog.form.divceState" value-key="divceState" clearable>
                <el-option
                  v-for="child in states"
                  :key="child.dictionaryId"
                  :label="child.itemName"
                  :value="child.dictionaryId"
                  :props=" { label: 'deptName', value: 'dictionaryId' }" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="固组单位" prop="divceTypeId">
              <el-select v-model="dialog.form.divceTypeId" value-key="divceTypeId" clearable>
                <el-option
                  v-for="child in divceTypeList"
                  :key="child.deptNo"
                  :label="child.deptName"
                  :value="child.deptNo"
                  :props=" { label: 'deptName', value: 'deptNo' }" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="投运日期" prop="divceDate">
              <el-date-picker
                v-model="dialog.form.divceDate"
                :picker-options="pickerOptions"
                value-format="timestamp"
                @change="changeFindDate" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="设备寿命" prop="divceAge">
              <el-input v-model="dialog.form.divceAge" maxlength="20" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="设备厂家" prop="producerName">
              <select-table
                v-model="dialog.form.producerName"
                :filter-form="selectTableModelLevel.filterForm"
                :filter-data="selectTableModelLevel.filterData"
                :default-data="producerList"
                :columns="selectTableModelLevel.columns"
                :total="selectTableModelLevel.total"
                :filter-fn="selectTableModelLevel.filterFn"
                @current-change="changeTableProducer"
                @clear="dialog.form.producerName='';dialog.form.id=''" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="厂家联系人" prop="contacts">
              <el-input v-model="dialog.form.contacts" maxlength="20" readonly="readonly" type="text" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="厂家电话" prop="contactsPhone">
              <el-input v-model="dialog.form.contactsPhone" readonly="readonly" maxlength="20" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="安装车号" prop="carId">
              <el-input v-model="dialog.form.carId" maxlength="20" type="text" />
            </el-form-item>
          </el-col>
        </el-row>
        <!--  <el-row>
          <el-col :span="12">
            <el-form-item label="是否系统" prop="isSystem">
              <el-switch v-model="dialog.form.isSystem" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否公用" prop="isPub">
              <el-switch v-model="dialog.form.isPub" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>-->
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="启用" prop="status">
              <el-switch v-model="dialog.form.status" :active-value="1" :inactive-value="0" />
            </el-form-item>
          </el-col>
        </el-row>-->
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark" style="height:150px">
              <el-input v-model="dialog.form.remark" maxlength="500" type="textarea" resize="none" placeholder="请输入描述 300字以内" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </base-dialog>
  </div>
</template>
<script>
import { findAllUnitDeptList } from '@/api/platform'
import {
  getStates,
  getListPage,
  getTypeListPage,
  getById
} from '@/api/cms/equipment/divceAttr/index'
export default {
  components: {},
  props: {
    dialog: {
      type: Object,
      default() {
        return {
        }
      }
    }
  },
  data() {
    return {
      // 查询列表请求参数
      listQuery: {
        page: 1,
        size: 20,
        typeNo: '004'
      },
      // eslint-disable-next-line vue/no-dupe-keys
      dialog: {
        title: '',
        visible: false,
        disabled: false,
        loading: false,
        dataList: {
          lineList: []
        },
        form: {
          deptList: [], // 使用单位数组
          states: [], // 状态数组
          producerList: [], // 厂家数组
          typeList: [], // 分类数组
          divceTypeList: [] // 固组数组
        }
      },
      deptList: [],
      states: [],
      producerList: [],
      typeList: [],
      isReloadData: true,
      divceTypeList: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > new Date().getTime()
        }
      },
      selectTableModelLevel: { // 厂家
        filterForm: {
          page: 1,
          size: 10,
          eqtName: ''
        },
        filterData: {
          eqtName: {
            key: 'eqtName',
            type: 'input',
            placeholder: '名称'
          }
        },
        columns: [
          { property: 'eqtName', label: '厂家名称' },
          { property: 'eqtNo', label: '厂家编号' },
          { property: 'contacts', label: '厂家联系人' },
          { property: 'contactsPhone', label: '厂家联系人电话' }
        ],
        total: 0,
        filterFn: getListPage
      }
    }
  },
  watch: {
    'dialog.visible'() {
      if (this.dialog.visible) {
        this.getList()
      }
    }
  },
  methods: {
    // 获取下拉数据、字典
    getList() {
      // 获取单位 getStates
      findAllUnitDeptList({}).then(response => {
        this.deptList = Object.freeze(response.data)
        this.divceTypeList = Object.freeze(response.data)
      })
      // 获取状态
      getStates({}).then(response => {
        this.states = Object.freeze(response.data)
      })
      // 获取分类
      getTypeListPage(this.listQuery).then(response => {
        this.typeList = Object.freeze(response.data)
      })

      /* // 获取厂家
                          getListPage(this.selectTableModelLevel.filterForm).then(response => {
                            this.producerList = Object.freeze(response.data)
                          })*/
      this.getListPageCategory()
    },

    // 回调方法
    updateData() {
      this.$refs.dataForm.validate((valid) => {
        if (valid) {
          this.dialog.loading = true
          this.$emit('updateData', this.dialog.form)
        }
      })
    },

    // 初始化
    async beforeOpenDialog() {
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    // 初始化
    afterCloseDialog() {
      this.dialog.form = []
    },
    // 厂家下拉详情
    getListPageCategory() {
      this.$nextTick(_ => {
        this.producerList = []
        this.selectTableModelLevel.total = 0
        this.selectTableModelLevel.filterForm = Object.assign({}, this.selectTableModelLevel.filterForm, {
          page: 1,
          size: 10,
          eqtName: ''
        })
        getListPage(this.selectTableModelLevel.filterForm)
          .then((response) => {
            this.producerList = response.data.records
            this.selectTableModelLevel.total = response.data.total
          })
      })
    },
    changeTableProducer(row) {
      var tempData = this.dialog.form
      tempData.producerId = row.id
      tempData.contacts = row.contacts
      tempData.contactsPhone = row.contactsPhone
      tempData.producerName = row.eqtName
      this.isReloadData = false
      this.$nextTick(() => {
        this.isReloadData = true
      })
    },
    changeFindDate() {
      var tempData = this.dialog.form
      if (tempData.findDate && tempData.solveTimeCount) {
        tempData.solveDate = tempData.findDate + (tempData.solveTimeCount * 86400000)
      }
      this.dialog.form = JSON.parse(JSON.stringify(tempData))
    },
    changeTypeList(row) {
      getById(row).then((response) => {
        this.dialog.form.divceName = response.data.typeName
        this.$forceUpdate()
      })
    }
  }
}
</script>
